<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02.关于事件</title>
    <!--1、引入react核心文件-->
    <script src="./js/react.development.js"></script>
    <!--2、引入react操作DOM的核心文件-->
    <script src="./js/react-dom.development.js"></script>
    <!--3、当需要书写JSX结构的时候，引入babel文件-->
    <script src="./js/babel.min.js"></script>
</head>

<body>
    <!--4、创建容器元素-->
    <div id="root"></div>
    <button id="btn">测试原生事件写法</button>
    <!--
        关于事件：
        1、React特点：声明式写法
        2、事件是按照小驼峰的方式来写，例如：onClick、onFocus、onBlur...  主要是为了和原生事件做区分
           事件后面的值是插值表达式，里面写的是`函数结构`（匿名函数/箭头函数）
           React中事件是属于合成事件，其中包含JS的原生事件对象 如果想要获取需要拿nativeEvent属性的值
    -->
    <!--5、设置script标签中内容类型为:text/babel-->
    <script type="text/babel">
        //6、获取根容器元素对象
        let root = ReactDOM.createRoot(document.querySelector('#root'));
        //为了程序更好的维护，将函数体内的业务逻辑单独声明出函数，在进行调用
        function fun() {
            console.log('我是fun函数....')
        }
        let fun1 = () => {
            console.log('我是箭头函数')
        }
        /*
         * 闭包函数的四个必要形成条件：
         * 1、外部函数必须调用
         * 2、外部函数必须和内部函数形成嵌套关系
         * 3、内部函数必须要作为外部函数的返回值
         * 4、内部函数引用外部函数的形式参数
        */
        function fun2(a) {
            return function () {
                console.log('我是fun2函数....')
                console.log('形参值', a);
            }
        }
        function fun3(num) {
            console.log('fun3....')
            console.log('形参值', num);
        }
        function fun4(e) {
            console.log('fun4....')
            console.log(e);
            //获取发生事件的目标源对象
            console.dir(e.target);
            //既然已经获取到了真实DOM，后期就可以操作其身上的属性
            console.log(e.target.innerHTML)
            console.log(e.target.clientWidth)
        }
        function fun5(e, num) {
            console.log('fun5...')
            console.log(num)
            console.log(e)
        }
        function fun6(num) {
            return e => {
                console.log('形参num', num);
                console.log('事件对象', e);
            }
        }
        function fun7(e) {
            //阻止事件的默认行为
            e.preventDefault();
            alert('自己增加的');
            window.location.href = 'http://www.jd.com';
        }
        function fun8(e) {
            // console.log(e.target)
            console.log(e.target.value)
        }
        //7、创建虚拟DOM
        let vDOM = <div>
            <button onClick={function () {
                console.log('我是匿名函数....');
            }}>匿名函数事件</button>
            <button onClick={() => {
                console.log('我是箭头函数')
            }}>箭头函数事件</button>
            <button onClick={fun}>外部函数-匿名函数事件</button>
            <button onClick={fun1}>外部函数-箭头函数事件</button>
            {/* 函数添加参数 */}
            <button onClick={fun2(1)}>外部函数-带参数-匿名函数事件</button>
            <button onClick={() => { fun3(10) }}>外部函数-带参数-箭头函数事件</button>
            {/* 使用事件对象 */}
            <button onClick={fun4}>外部函数-不带参数-获取事件对象-匿名函数事件1</button>
            <button onClick={e => fun5(e, 100)}>外部函数-带参数-获取事件对象-匿名函数事件1</button>
            <button onClick={fun6(100)}>外部函数-带参数-获取事件对象</button>
            {/* 常见的取消事件默认行为：超链接、表单 */}
            <a href="http://www.baidu.com" onClick={fun7}>百度</a>
            <form action="http://www.baidu.com" method="get">
                <input type="text" name="username" />
                <button>提交</button>
            </form>
            {/* 关于input相关类型的元素 
              onChange:是当元素的值/状态 被改变的时候 所调用的事件
              在React中的onChange是类似于原生事件中的oninput事件(实时输入)
            */}
            账号：<input type="text" onChange={fun8} />
            <input type="checkbox" />
        </div>
        //8、渲染(目的是为了将虚拟DOM转化成真实DOM)
        root.render(vDOM);

        // let btn = document.querySelector('button')
        // function f1(){

        // }
        // btn.onclick = f1


    </script>
    <script>
        let btn1 = document.querySelector('#btn');

        btn1.onclick = function (e) {
            //需求：想要获取实际发生事件的目标源对象 button
            // e = window.event || e;
            console.log(e)
            console.log(e.target);
        }
    </script>
</body>

</html>